<template>
  <div class="wrapper">
    <el-tabs>
      <el-tabs v-model="activeName">
        <el-tab-pane label="商品介绍" name="description">
          <tab-description :data="data"/>
        </el-tab-pane>
        <el-tab-pane label="常见问题" name="faq">
          <tab-questions :data="data"/>
        </el-tab-pane>
        <el-tab-pane :label="'评论('+reviewCount+')'">
          <tab-reviews :data="data" @countChange="countChange"/>
        </el-tab-pane>
      </el-tabs>
    </el-tabs>
  </div>
</template>

<script>
import TabDescription from '@/views/part/shopDetail/part/goodInfo/TabDescription'
import TabQuestions from '@/views/part/shopDetail/part/goodInfo/TabQuestions'
import TabReviews from '@/views/part/shopDetail/part/goodInfo/TabReviews'
export default {
  name: 'GoodInfo',
  components: { TabReviews, TabQuestions, TabDescription },
  props: {
    data: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      reviewCount: 0,
      activeName: 'description'
    }
  },
  methods: {
    freshData () {
      this.reviewCount = 0
      this.activeName = 'description'
    },
    countChange (val) {
      this.reviewCount = val
    }
  },
  watch: {
    data () {
      this.freshData()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
